<template>
  <view v-if="shenheStatus == 0" class="history">
    <view class="" style="background-color: #fff">
      <view style="width: 300rpx; float: left">
        <u-tabs
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="change"
          active-color="#F2270C"
        >
        </u-tabs>
      </view>
      <!-- <view style="float: right;padding: 20rpx;" v-show="current == 0" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑足迹' }}</view> -->
      <view style="clear: both"></view>
    </view>
    <ren-calendar
      ref="ren"
      :markDays="markDays"
      :open="false"
      :disabledAfter="true"
      @onDayClick="onDayClick"
    >
    </ren-calendar>
    <view
      style="
        background-color: rgb(246, 246, 246);
        padding-left: 30rpx;
        padding-top: 40rpx;
        font-weight: bold;
      "
    >
      <image
        v-if="isEdit"
        :src="
          isCheckAll ? asyncImgs.history.checked : asyncImgs.history.unchecked
        "
        style="width: 30rpx; height: 30rpx; margin-right: 20rpx"
        @click="isCheckAll = !isCheckAll"
      ></image>
      {{ curDate }}
    </view>
    <GoodsList
      @remove="removeGoods"
      v-if="current == 0"
      :isEdit="isEdit"
      :list="goodsList"
    ></GoodsList>
    <!-- <ShopList @remove="removeShop" v-if="current == 1" :list="shopList"></ShopList> -->
    <view class="bottom_actions" v-if="isEdit">
      <image
        :src="
          isCheckAll ? asyncImgs.history.checked : asyncImgs.history.unchecked
        "
        mode=""
        style="width: 30rpx; height: 30rpx; margin-right: 20rpx"
        @click="isCheckAll = !isCheckAll"
      ></image>
      {{ $t('cart.all') }}
      <text
        style="
          background-color: red;
          color: #fff;
          font-size: 34rpx;
          padding: 0 40rpx;
          float: right;
        "
        >{{ $t('cart.delete') }}(0)</text
      >
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import RenCalendar from './components/ren-calendar.vue';
import GoodsList from './components/goods_his_list.vue';
import ShopList from './components/shop_his_list.vue';
export default {
  components: {
    RenCalendar,
    GoodsList,
    ShopList,
    Shenhe,
  },
  data() {
    return {
      goodsList: [],
      shopList: [],
      list: [
        {
          name: this.$t('goods.goods'),
        },
        // {
        // 	name: this.$t('goods.shop')
        // }
      ],
      current: 0,
      curDate: '',
      markDays: [],
      isCheckAll: false,
      isEdit: false,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.history'),
    });
  },
  watch: {
    curDate(val) {
      this.getHisList();
    },
    isCheckAll(val) {
      this.goodsList.forEach(item => {
        this.$set(item, 'isChecked', val);
      });
    },
    current(val) {
    },
  },
  onReady() {
    let today = this.$refs.ren.getToday().date;
    this.curDate = today;
    this.markDays.push(today);
    this.getHisList();
  },
  methods: {
    async getHisList() {
      try {
        const res = await this.$allrequest.browse.browse({
          day: this.curDate,
        });
        this.goodsList = res.data.re_arr;
        this.shopList = res.data.re_shop_arr;
      } catch (e) {
        //TODO handle the exception
      }
    },
    async removeShop(id, index) {
      try {
        const res = await this.$allrequest.browse.delShopLog({
          id: id,
        });
        if (res.code == 0) {
          this.shopList.splice(index, 1);
        } else {
          uni.showToast({
            title: res.msg,
          });
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    async removeGoods(id, index) {
      try {
        const res = await this.$allrequest.browse.delGoodsLog({
          id: id,
        });
        if (res.code == 0) {
          this.goodsList.splice(index, 1);
        } else {
          uni.showToast({
            title: res.msg,
          });
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    onDayClick(data) {
      this.curDate = data.date;
    },
    change(index) {
      this.current = index;
    },
  },
};
</script>

<style scoped lang="scss">
.history {
  min-height: 100vh;
  background-color: rgb(246, 246, 246);
}

.bottom_actions {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 20rpx;
}
</style>
